<script setup>
import { ref, computed, defineProps } from "vue"
// props数据
const props = defineProps({
  todoList: {}
})
// 定义周
const weekArr = ref(["日", "一", "二", "三", "四", "五", "六"])
// 定义日
const dataArr = ref([])

// 获取默认选中的日期

// let selectData = ref({})

let selectData = ref({
  year: new Date().getFullYear(),
  month: new Date().getMonth() + 1,
  day: new Date().getDate()
})

// 获取指定月份数据
const getMonthdata = (date) => {
  const { year, month, day } = date
  let dataArr = []
  let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] //一三五七八十腊
  // 闰年处理
  if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    daysInMonth[1] = 29
  }
  const monthStartWeekDay = new Date(year, month - 1, 1).getDay()
  const monthEndWeekDay = new Date(year, month, 1).getDay()
  // 数据填充
  for (let i = 0; i < monthStartWeekDay; i++) {
    let emptyObj = {
      type: "pre",
      day: "",
      month: "",
      year: ""
    }
    dataArr.push(emptyObj)
  }

  for (let i = 0; i < daysInMonth[month - 1]; i++) {
    let itemObj = {
      type: "normal",
      day: i + 1 + "",
      month,
      year,
      isSelected: Number(day) === i + 1,
      isTodo: false
    }
    dataArr.push(itemObj)
  }

  for (let i = 0; i < 6 - monthEndWeekDay; i++) {
    let emptyObj = {
      type: "next",
      day: "",
      month: "",
      year: ""
    }
    dataArr.push(emptyObj)
  }
  return dataArr
}
dataArr.value = getMonthdata(selectData.value)
// 切换点选日期
const checkoutDate = (selectDataInput) => {
  if (selectDataInput.type !== "normal") return //非有效日期不可选
  selectData.value.day = selectDataInput.day
  // 查找当前选中日期的索引
  const oldSelectIndex = dataArr.value.findIndex(
    (item) => item.isSelected && item.type === "normal"
  )
  const newSelectIndex = dataArr.value.findIndex(
    (item) => item.day === selectDataInput.day && item.type === "normal"
  )
  if (dataArr.value[oldSelectIndex])
    dataArr.value[oldSelectIndex].isSelected = false

  if (dataArr.value[newSelectIndex])
    dataArr.value[newSelectIndex].isSelected = true
}
// 切换月份
const checkoutPreMonth = () => {
  let { year, month } = selectData.value
  if (month === 1) {
    year -= 1
    month = 12
  } else {
    month -= 1
  }
  if (
    year === new Date().getFullYear() &&
    month === new Date().getMonth() + 1
  ) {
    selectData.value = { year, month, day: new Date().getDate() }
  } else {
    selectData.value = { year, month, day: "" }
  }
  dataArr.value = getMonthdata(selectData.value)
  todoMeth(props.todoList)
}
const checkoutNextMonth = () => {
  let { year, month } = selectData.value
  if (month === 12) {
    year += 1
    month = 1
  } else {
    month += 1
  }
  if (
    year === new Date().getFullYear() &&
    month === new Date().getMonth() + 1
  ) {
    selectData.value = { year, month, day: new Date().getDate() }
  } else {
    selectData.value = { year, month, day: "" }
  }
  dataArr.value = getMonthdata(selectData.value)
  todoMeth(props.todoList)
}
// 如果月份小于10补0
const dealMonth = computed(() => {
  return selectData.value.month < 10
    ? 0 + "" + selectData.value.month
    : selectData.value.month
})
// 待办事项数据处理(调用三次)
const todoMeth = (dateArr) => {
  dataArr.value.forEach((item) => {
    dateArr.forEach((ele) => {
      if (
        item.year === ele.year &&
        item.month === ele.month &&
        item.day === ele.day + ""
      ) {
        item.isTodo = true
      }
    })
  })
}

todoMeth(props.todoList)
</script>

<template>
  <div class="calendar">
    <div class="left">
      <div class="month_swich">
        <div class="month">{{ dealMonth }}</div>
        <div class="year">{{ selectData.year }}</div>
        <div class="pre" @click="checkoutPreMonth"></div>
        <div class="next" @click="checkoutNextMonth"></div>
      </div>
    </div>
    <div class="right">
      <ul class="week-area">
        <li class="week-item" v-for="(item, index) in weekArr" :key="index">
          {{ item }}
        </li>
      </ul>
      <ul class="data-area">
        <li
          class="calendar-item"
          v-for="(item, index) in dataArr"
          :key="index"
          :class="{ beijing_1: item.isSelected, beijing_2: item.isTodo }"
          @click="checkoutDate(item)"
        >
          <div :class="{ item1: item.isSelected, item2: item.isTodo }">
            {{ item.day }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
ul,
h1,
h3,
h4,
p,
dl,
dd {
  padding: 0;
  margin: 0;
}

.calendar {
  overflow-x: hidden;
  height: 580px;
  width: 926px;
  display: flex;
}

.left {
  width: 234px;
  height: 100%;
  position: relative;
}

.month_swich {
  position: absolute;
  height: 41px;
  width: 144px;
  left: 48px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.month,
.year {
  width: 28px;
}

.pre,
.next {
  height: 21px;
  width: 21px;
  background-color: aqua;
}

.right {
  flex: 1;
  height: 100%;
}

.week-area {
  width: 100%;
  display: flex;
}

.week-item {
  flex: 0 0 14.285%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-area {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.calendar-item {
  line-height: 50px;
  flex: 0 0 14.285%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* .beijing_1 {
  height: 28px;
  width: 28px;
  background-color: #ff0000;
  border-radius: 50%;
}

.beijing_2 {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 1px solid rgb(147, 45, 45);
} */
.item1 {
  margin-left: 1px;
  color: black;
  height: 28px;
  width: 28px;
  background-color: pink;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
}

.item2 {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 1px solid rgb(147, 45, 45);
  text-align: center;
  line-height: 28px;
}
</style>
